import 'package:flutter/material.dart';

void main() {
  runApp(LayoutDemoApp());
}

class LayoutDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '布局简化示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: LayoutDemoHome(),
    );
  }
}

class LayoutDemoHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('布局类组件综合演示')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 标题区域：Row线性布局（图标+文字）
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.grid_view, size: 32, color: Colors.blue),
                SizedBox(width: 10),
                Text(
                  '线性与弹性布局',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ],
            ),

            SizedBox(height: 20),

            // 弹性布局演示区：Row中Expanded按比例分配空间
            Container(
              height: 150,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                children: [
                  // flex=1的红色区域
                  Expanded(
                    flex: 1,
                    child: Container(
                      color: Colors.red.withOpacity(0.7),
                      child: Center(
                        child: Text('flex:1',
                            style: TextStyle(color: Colors.white)),
                      ),
                    ),
                  ),

                  // flex=2的蓝色区域（两倍空间）
                  Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.blue.withOpacity(0.7),
                      child: Center(
                        child: Text('flex:2',
                            style: TextStyle(color: Colors.white)),
                      ),
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(height: 20),

            // 线性布局按钮组：Row配合Flexible实现响应式
            Container(
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  // 弹性按钮1
                  Flexible(
                    flex: 1,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 5),
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text('功能A'),
                      ),
                    ),
                  ),

                  // 弹性按钮2
                  Flexible(
                    flex: 1,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 5),
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text('功能B'),
                      ),
                    ),
                  ),

                  // 弹性按钮3
                  Flexible(
                    flex: 1,
                    child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 5),
                      child: ElevatedButton(
                        onPressed: () {},
                        child: Text('功能C'),
                      ),
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(height: 20),

            // 垂直弹性布局：Column中Expanded分配空间
            Container(
              height: 200,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                children: [
                  // flex=3的顶部区域（占据3/5空间）
                  Expanded(
                    flex: 3,
                    child: Container(
                      color: Colors.green.withOpacity(0.3),
                      child: Center(
                        child: Text(
                          '顶部区域\n(flex:3)',
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                  ),

                  // flex=2的底部区域（占据2/5空间）
                  Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.orange.withOpacity(0.3),
                      child: Center(
                        child: Text(
                          '底部区域\n(flex:2)',
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}


